<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layouts/layout">
<head>
</head>
<body>
<div layout:fragment="content">
    <div class="panel panel-flat">
        <div class="panel-body">
            <form class="form-horizontal" action="#" id="edit-password-form">
                <fieldset class="content-group">
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-sm-offset-2">旧密码：</label>
                        <div class="col-lg-5">
                            <input type="password" class="form-control" name="originalPassword" placeholder="请输入旧密码！"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-sm-offset-2">设置新密码：</label>
                        <div class="col-lg-5">
                            <input type="password" class="form-control" name="newPassword1" placeholder="请输入新密码！"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-sm-offset-2">再次输入新密码：</label>
                        <div class="col-lg-5">
                            <input type="password" class="form-control" name="newPassword2" placeholder="请再次输入新密码！"/>
                        </div>
                    </div>
                </fieldset>
                <div class="text-right">
                    <button type="submit" class="btn btn-primary">提交<i class="icon-arrow-right14 position-right"></i></button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /page content -->
</body>
</html>
<script type="text/javascript">
    $(function () {

        jQuery.validator.addMethod("checkPasswordSame", function (value, element) {
            var newPassword1 = $("input[name=newPassword1]").val();
            var newPassword2 = $("input[name=newPassword2]").val();
            if(newPassword1 != newPassword2){
                return false;
            }
            return true;
        }, "两个输入的新密码必须一致");

        $("#edit-password-form").validate({
            ignore: 'input[type=hidden]',
            errorClass: 'validation-error-label',
            successClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            // Different components require proper error label placement
            errorPlacement: function (error, element) {
                // Styled checkboxes, radios, bootstrap switch
                if (element.attr("type") == "checkbox") {
                    error.appendTo(element.parent().parent().parent().parent().parent().parent().parent());
                } else if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
                    if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                        error.appendTo(element.parent().parent().parent().parent());
                    }
                    else {
                        error.appendTo(element.parent().parent().parent().parent().parent());
                    }
                }

                // Unstyled checkboxes, radios
                else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                    error.appendTo(element.parent().parent().parent());
                }

                // Input with icons and Select2
                else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo(element.parent());
                }

                // Inline checkboxes, radios
                else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo(element.parent().parent());
                }

                // Input group, styled file input
                else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                }
                else {
                    //console.log(error);
                    //console.log(element);
                    error.insertAfter(element);
                }
            },
            validClass: "validation-valid-label",
            success: function (label) {
                label.remove();
            },
            rules: {
                originalPassword: {
                    required: true
                },
                newPassword1: {
                    required: true
                },
                newPassword2: {
                    required: true,
                    checkPasswordSame: true
                }
            },
            messages: {
                originalPassword: {
                    required: "旧密码不能为空"
                },
                newPassword1: {
                    required: "新密码不能为空"
                },
                newPassword2: {
                    required: "新密码不能为空"
                }

            },
            submitHandler: function (form) {

                var originalPassword = $("input[name=originalPassword]").val();
                var newPassword1 = $("input[name=newPassword1]").val();
                var newPassword2 = $("input[name=newPassword2]").val();

                $.ajax({
                    url: '/management_system/savePassword',
                    type: 'GET',
                    data: {originalPassword: originalPassword, newPassword1: newPassword1, newPassword2: newPassword2},
                    dataType: 'JSON',
                    success: function (data) {
                        if(data.code == 0){
                            showSuccessMessage(data.message);
                        }else{
                            showErrorMessage(data.message);
                        }

                    },
                    error: function (error) {
                        console.log(error);
                        showErrorMessage("保存出错");
                    }
                });

            }
        });

    });
</script>

